import React from "react";
import { Spin } from "antd";
import Condition from "components/condition";
import { messages } from "share/common";

import NullCard from "containers/dashboard/dashboard-component/null-card";
import CardTitle from "containers/dashboard/dashboard-component/card-title";
import expenseService from "containers/my-account/expense.service";
import dashboardService from "containers/dashboard/dashboard.service";
import "styles/dashboard/business-card.scss";

const { If, Else } = Condition;

class BusinessCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      load: false,
      businessCardEnabled: null,
      businessCard: {},
      businessCardTotalAmount: 0,
    };
  }

  componentWillMount() {
    this.getBusinessCardStatus();
  }

  getBusinessCardStatus = () => {
    this.setState({ load: true });
    expenseService
      .getBusinessCardStatus()
      .then((res) => {
        !!res.data.rows && this.getBusinessCardData();
        this.setState({
          businessCardEnabled: res.data.rows,
          load: false,
        });
      })
      .catch(() => {
        this.setState({ load: false });
      });
  };

  getBusinessCardData = () => {
    dashboardService
      .getBusinessCard()
      .then((res) => {
        const businessCardTotalAmount = res.data.businessCardDetail.detail.reduce(
          (pre, now) => now.totalAmount + pre,
          0
        );
        this.setState({
          businessCard: res.data.businessCardDetail,
          businessCardTotalAmount,
          load: false,
        });
      })
      .catch(() => {
        this.setState({ load: false });
      });
  };

  render() {
    const { load, businessCard, businessCardEnabled, businessCardTotalAmount } = this.state;
    const { removeModule, uniKey } = this.props;
    return (
      <div id={`home-${uniKey}`} data-id={`home-${uniKey}`} className="business-card one-third-width">
        <Spin spinning={load}>
          <div className="home-title">{messages("basic-1.key102") /*商务卡*/}</div>
          <div className="card-content">
            <Condition>
              <If value={businessCardEnabled || load}>
                <Condition>
                  <If value={businessCard.totalexpenseNumber > 0}>
                    <div className="amount-card">
                      <div className="amount-title">
                        {businessCard.totalexpenseNumber}
                        <span>{messages("basic-1.key103") /*笔待处理商务卡消费*/}</span>
                      </div>
                      <div className="amount-detail">
                        {" "}
                        {messages("common.total.amount") /*总金额*/}:{this.filterMoney(businessCardTotalAmount)}，
                        {messages("basic-1.key99") /*记得赶紧处理哦*/}~
                      </div>
                    </div>
                  </If>
                  <Else>
                    <NullCard
                      imgType={"businessCard"}
                      message={messages("basic-1.key104") /*太棒啦！没有待处理的消费！*/}
                    />
                  </Else>
                </Condition>
              </If>
              <Else>
                <NullCard imgType={"unOpenedCard"} message={messages("basic-1.key198") /*您当前没有启用的商务卡*/} />
              </Else>
            </Condition>
          </div>
        </Spin>
      </div>
    );
  }
}

BusinessCard.propTypes = {
  removeModule: React.PropTypes.func.isRequired,
};

BusinessCard.defaultProps = {};

export default BusinessCard;
